import React from 'react';
import {Form, Input, Button, Checkbox, Modal} from 'antd';
import {UserOutlined, LockOutlined} from '@ant-design/icons';
import 'antd/dist/antd.css';
import {postRequest} from "../util/Fetch";
import {useNavigate} from 'react-router-dom';

const Login = () => {
    const navigate = useNavigate();
    const onFinish = async (values) => {
        console.log('Received values:', values);
        // Add your authentication logic here
        try {
            const resp = await postRequest("login", values);
            if(resp.success !== undefined){
                // 处理注册成功的逻辑
                Modal.success({
                    title: 'Login Successful',
                    content: resp.success,
                    onOk: () => {
                        setTimeout(() => {
                            navigate('/home');
                        }, 1000);
                    },
                });
            }
        } catch (error) {
            // 处理注册失败的逻辑
            Modal.error({
                title: 'Login Failed',
                content: error.message,
            });
        }


    };

    return (
        <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh'}}>
            <Form
                name="loginForm"
                initialValues={{remember: true}}
                onFinish={onFinish}
                style={{
                    width: 350,
                    padding: 20,
                    border: '2px solid #d9d9d9',
                    borderRadius: 5,
                    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)'
                }}
            >
                <Form.Item
                    name="username"
                    rules={[{required: true, message: 'Please input your username!'}]}
                >
                    <Input prefix={<UserOutlined/>} placeholder="Username"/>
                </Form.Item>

                <Form.Item
                    name="password"
                    rules={[{required: true, message: 'Please input your password!'}]}
                >
                    <Input.Password prefix={<LockOutlined/>} placeholder="Password"/>
                </Form.Item>

                <Form.Item>
                    <Form.Item name="remember" valuePropName="checked" noStyle>
                        <Checkbox>Remember me</Checkbox>
                    </Form.Item>

                    <a style={{float: 'right'}} href="/">
                        Forgot password
                    </a>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" style={{width: '100%'}}>
                        Log in
                    </Button>
                    Or <a href="/register">register now!</a>
                </Form.Item>
            </Form>
        </div>
    );
};

export default Login;